<template>
  <view class="main">
	  <uni-popup ref="popup" type="top" >
		  <view class="popupStroeInsure">
			   <storeInSure :applyForItem='applyForItem' class="store_in_sure" @close="closePopup"></storeInSure> 
		  </view>
	
	  </uni-popup>

    <view class="title">
  	  <view class="section-title">入库申请单列表</view>
    </view>
    <view class="form-section">
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
						@cancel="cancel" @clear="clear">
					</uni-search-bar>
      <view class="list">
        <view class="head">
          <view class="th th-1"><text>行</text></view>
          <view class="th th-2"><text>货主</text></view>
          <view class="th th-3"><text>申请单号</text></view>
          <view class="th th-4"><text>申请人</text></view>
          <view class="th th-5"><text>申请日期</text></view>
          <view class="th th-6"><text>状态</text></view>
        </view>
        <view 
          v-for="(item, index) in storageApplications" 
          :key="item._id" 
          class="item"
          @click="viewDetail(item)"
        >
          <view class="tr tr-1"><text>{{index + 1}}</text></view>
          <view class="tr tr-2"><text>{{item.supplier}}</text></view>
          <view class="tr tr-3"><text>{{item.applyForId}}</text></view>
          <view class="tr tr-4"><text>{{item.applyUser}}</text></view>
          <view class="tr tr-5"><text>{{item.applyDate}}</text></view>
          <view class="tr tr-6">
            <text :class="getStatusClass(item.approval)">{{getStatusText(item.approval)}}</text>
          </view>
        </view>
      </view>
    </view>
	
  </view>
</template>

<script>
const CouldDb = uniCloud.importObject('getDb');
import { commonProps } from '@vuemap/vue-amap';
import storeInSure from './storeInSure.vue';
import { store, mutations } from '@/uni_modules/uni-id-pages/common/store.js';
export default {
  name: 'appStorageList',
  components:{
	storeInSure  
  },
  data() {
	  
    return {
      storageApplications: [],
	  searchValue:"",
	  applyForItem:{},
	  storeInSureShow:false
       
    };
  },
  computed:{
	  userInfo(){
		  return store.userInfo
	  }
  },
  mounted() {
	  console.log('列表查询');
  this.initData()	
  },
  methods: {
	  search(){
		  
	  },
	  blur() {
	  	
	  },
	  focus() {
	  	
	  },
	  input(){
		  
	  },
	  cancel(){
		  
	  },
	  clear(){
		  
	  },
	  
	 async initData(){
		 try{
			const where={}
		const list=await CouldDb.getAppForStorageList(where) 
		console.table('申请单列表',list);
		if(list.code){
			this.storageApplications=list.data
			}else{
			this.storageApplications=[]
		} 
		 }catch(e){
			 console.error(e);
		 }
	 },
  
    viewDetail(item) {
		this.applyForItem=item
		this.$refs.popup.open()
		this.storeInSureShow=true

    },
	closePopup(){
		this.$refs.popup.close()
	},
    formatDate(dateStr) {
      return dateStr;
    },
		getStatusClass(approval) {
			if (approval.length === 0) {
				return 'status-pending';
			}
			switch (approval[0].status) {
				case 0:
					return 'status-pending';
				case 1:
					return 'status-approved';
				case 2:
					return 'status-rejected';
		
				default:
					return 'status-pending';
			}
		},
		getStatusText(approval) {
			if (approval.length === 0) {
				return '待验收';
			}
			switch (approval[0].status) {
				case 0:
					return '待验收';
				case 1:
					return '待申核';
				case 2:
					return '已归档';
		
				default:
					return '待验收';
			}
		}
  }
};
</script>

<style lang="scss" scoped>
// 状态样式保持不变
.status-pending {
  color: #ff9800;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
  background-color: #fff8e1;
}
.status-approved {
  color: #4caf50;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
  background-color: #e8f5e9;
}
.status-rejected {
  color: #f44336;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
  background-color: #ffebee;
}

.main {
  position: relative;
  padding: 20rpx;
  background-color: #f5f5f5;
  min-width: 1500rpx;
  margin-bottom: 200rpx;
}

.popupStroeInsure{
 margin: 0 auto;
 width: 50vw;
	 
}

.title {
  display: flex;
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  padding: 20rpx 20rpx;
  justify-content: space-between;
  .newbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200rpx;
    height: 60rpx;
    font-size: 32rpx;
    color: #fff;
    background-color: #55aaff;
    border-radius: 30rpx;
    cursor: pointer;
  }
}
.section-title {
	display: flex;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	padding-bottom: 10rpx;
	border-bottom: 2rpx solid #f0f0f0;

}
.form-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.list {
  display: flex;
  flex-direction: column;
}
.head {
  display: flex;
  width: 100%;
  margin-bottom: 10rpx;
}
.item {
  display: flex;
  width: 100%;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

/* 优化表头样式 */
.th {
  display: flex;
  font-weight: 600;
  background-color: #f5f5f5;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
  margin: 2rpx;
  padding: 10rpx;
  box-sizing: border-box;
}
.th-1 {
  width: 5%;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;

}
.th-2 {
  width: 20%;
}
.th-3 {
  width: 25%;
}
.th-4 {
  width: 20%;
}
.th-5 {
  width: 20%;
}
.th-6 {
  width: 10%;
}

/* 优化列表行样式 */
.tr {
  display: flex;
  background-color: #f9f9f9;
  margin: 2rpx;
  padding: 10rpx;
  box-sizing: border-box;
  :active{
	  background-color: #e8f5e9;
  }

}
.tr-1 {
display: flex;
  width: 5%;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: 500;
}
.tr-2 {
  width: 20%;
}
.tr-3 {
  width: 25%;
}
.tr-4 {
  width: 20%;
}
.tr-5 {
  width: 20%;
}
.tr-6 {
  width: 10%;
}
</style>